<template>
    <div class="app-container">
      <div class="mapDiv" v-loading="mapLoading">
        <!--地图-->
        <FsiIndexMap v-if="completeRefreshData==true"
                     @getMap="getMap" :centerLonLat="addForm.centerLonLat" :dzLonLat="addForm.dzLonLat"
                     :fastSiVersion="fastSiVersion" :fastSeismicInfluenceList="fastSeismicInfluenceList"
                     :fsiLegendList="fsiLegendList" :clickParams="clickParams" @setEpicenterLayerBool="setEpicenterLayerBool"
        ></FsiIndexMap>
        <!--工具条控件-->
        <ControlToolBar v-if="completeRefreshData==true"
                        :map="map" :pageType="pageType" :mapDrawType="mapDrawType"
                        @showFastSeismicInfluenceDiv="showFastSeismicInfluenceDiv"
                        @getDirectionLine="getDirectionLine" @showFaultVersion="showFaultVersion"
                        @showFastSiVersionTable="showFastSiVersionTable" @getClickFeature="getClickFeature"
                        @getClickLonLat="getClickLonLat"
                        :popupContent="popupContent"
        ></ControlToolBar>
        <!--超图图层显示-->
        <SuperMapLayer v-if="completeRefreshData==true"
                       :map="map" :layerDataTypeList="layerDataTypeList" :epicenterLayerBool="epicenterLayerBool"
                       :resetClearAllBool="resetClearAllBool" :epicenterLayerBool2="epicenterLayerBool2"
                       :clickLonLat="clickLonLat"
        ></SuperMapLayer>

        <div class="currentEventDiv">
            <p>当前地震事件:
                <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
                <span v-else>请在地震事件管理中设置当前地震事件</span>
            </p>
            <!--快速生成地震影响场面板-->
            <div v-show="showFastSeismicInfluenceDivBool" style="margin-top: 10px;">
              <el-form ref="addRef" label-width="140px" :model="addForm" :rules="rules">
                <el-row style="margin: 20px 0;">
                  <el-col :span="24">
                    <el-form-item label="选择衰减关系模型" prop="modelId" required>
                      <span v-if="addForm.modelId" @click="selectModel" style="color:rgb(9 130 255);cursor:pointer;">{{addForm.modelName}}</span>
                      <el-button v-else @click="selectModel">衰减关系模型</el-button>
                    </el-form-item>
                    <el-form-item label="中心点经纬度" prop="longitude" required>
                      <span v-if="addForm.longitude">{{longitude}}，{{latitude}}</span>
                    </el-form-item>
                    <el-form-item label="长轴方向" prop="angle" required>
                      <el-input-number v-model="addForm.angle" :min="-180" :max="180"></el-input-number>
                      <el-button @click="mapDrawLine" style="margin-left: 20px;">地图指定</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div style="text-align: center;margin-top: -20px;margin-bottom: 10px;">
                <el-button @click="createFastSeismicInfluence" type="primary">快速生成</el-button>
              </div>
            </div>
        </div>
        <!--衰减关系模型-->
        <el-dialog :title="dialogTitle" v-model="dialogOpen" width="1000px" append-to-body @close="closeDialog">
          <IntensityModel v-if="dialogOpen" @sureSelectModel="sureSelectModel"></IntensityModel>
        </el-dialog>

        <!--地震影响场版本信息列表-->
        <div v-if="showFastSiVersionTableBool" class="new-tableDiv">
          <el-table v-loading="tableLoading" :data="fastSiVersionList" stripe>
            <el-table-column label="序号" align="center" width="55">
              <template #default="scope">
                <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地震影响场图编号" align="center" prop="versionCode" width="200">
              <template #default="scope">
                        <span style="color: #107ce1;cursor: pointer;" @click="queryFastSeismicInfluence(scope.row.fvId)">{{
                            scope.row.versionCode
                          }}</span>
              </template>
            </el-table-column>
            <el-table-column label="长轴方向" align="center" prop="angle" width="100" />
            <el-table-column label="Ⅵ度区图片" align="center" prop="imageIds6" width="100">
              <template #default="scope">
                        <span style="color: #107ce1;cursor: pointer;" @click="uploadImageDiv(scope.row.fvId,6)"
                              v-if="scope.row.minIntensity<=6 && scope.row.maxIntensity>=6">查看</span>
              </template>
            </el-table-column>
            <el-table-column label="Ⅶ度区图片" align="center" prop="imageIds7" width="100">
              <template #default="scope">
                <span style="color: #107ce1;cursor: pointer;" @click="uploadImageDiv(scope.row.fvId,7)"
                      v-if="scope.row.minIntensity<=7 && scope.row.maxIntensity>=7">查看</span>
              </template>
            </el-table-column>
            <el-table-column label="Ⅷ度区图片" align="center" prop="imageIds8" width="100">
              <template #default="scope">
                <span style="color: #107ce1;cursor: pointer;" @click="uploadImageDiv(scope.row.fvId,8)"
                      v-if="scope.row.minIntensity<=8 && scope.row.maxIntensity>=8">查看</span>
              </template>
            </el-table-column>
            <el-table-column label="Ⅸ度区图片" align="center" prop="imageIds9" width="100">
              <template #default="scope">
                <span style="color: #107ce1;cursor: pointer;" @click="uploadImageDiv(scope.row.fvId,9)"
                      v-if="scope.row.minIntensity<=9 && scope.row.maxIntensity>=9">查看</span>
              </template>
            </el-table-column>
            <el-table-column label="Ⅹ度区图片" align="center" prop="imageIds10" width="100">
              <template #default="scope">
                <span style="color: #107ce1;cursor: pointer;" @click="uploadImageDiv(scope.row.fvId,10)"
                      v-if="scope.row.minIntensity<=10 && scope.row.maxIntensity>=10">查看</span>
              </template>
            </el-table-column>
            <el-table-column label="生成人" align="center" prop="createUserName" width="100" />
            <el-table-column label="生成时间" align="center" prop="createTime" width="100" />
            <el-table-column label="中心点经度" align="center" prop="longitude" width="100" />
            <el-table-column label="中心点纬度" align="center" prop="latitude" width="100" />
            <el-table-column label="震级" align="center" prop="earthquakeLevel" width="100" />
            <el-table-column label="操作" align="center" width="200" fixed="right">
              <template #default="scope">
                <el-button type="text" @click="downloadShpFile(scope.row.fvId)">导出</el-button>
                <el-button type="text" @click="uploadImageDiv(scope.row.fvId,null)">上传图片</el-button>
                <el-button type="text" @click="queryFastSeismicInfluence(scope.row.fvId)">地图查看</el-button>
                <el-button type="text" @click="handleDelete(scope.row.fvId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
                      @pagination="getFastSiVersionList" />
        </div>

        <!--图片上传|查看-->
        <el-dialog :title="title" v-model="uploadImageBool" width="600px" append-to-body>
          <el-form ref="imageAddRef" label-width="170px" :model="imageForm">
            <el-row style="margin: 20px 0;" v-if="(showImageIntensity6==true || showImageIntensityAll==true) && imageForm.minIntensity<=6 && imageForm.maxIntensity>=6">
              <el-col>
                <el-form-item label="Ⅵ度区图片" prop="imageIds6" required :rules="imageRules.imageIds6">
                  <ImageUpload ref="imageUpload6" :modelValue="imageForm.imageIds6" @uploadImage="imgUploadSuccess6" @delImage="delImage6" :fileType="['png','jpg','jpeg']" :limit="4"></ImageUpload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 20px 0;" v-if="(showImageIntensity7==true || showImageIntensityAll==true) && imageForm.minIntensity<=7 && imageForm.maxIntensity>=7">
              <el-col>
                <el-form-item label="Ⅶ度区图片" prop="imageIds7" required :rules="imageRules.imageIds7">
                  <ImageUpload ref="imageUpload7" :modelValue="imageForm.imageIds7"  @uploadImage="imgUploadSuccess7" @delImage="delImage7" :fileType="['png','jpg','jpeg']" :limit="4"></ImageUpload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 20px 0;" v-if="(showImageIntensity8==true || showImageIntensityAll==true) && imageForm.minIntensity<=8 && imageForm.maxIntensity>=8">
              <el-col>
                <el-form-item label="Ⅷ度区图片" prop="imageIds8" required :rules="imageRules.imageIds8">
                  <ImageUpload ref="imageUpload8" :modelValue="imageForm.imageIds8"  @uploadImage="imgUploadSuccess8" @delImage="delImage8" :fileType="['png','jpg','jpeg']" :limit="4"></ImageUpload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 20px 0;" v-if="(showImageIntensity9==true || showImageIntensityAll==true) && imageForm.minIntensity<=9 && imageForm.maxIntensity>=9">
              <el-col>
                <el-form-item label="Ⅸ度区图片" prop="imageIds9" required :rules="imageRules.imageIds9">
                  <ImageUpload ref="imageUpload9" :modelValue="imageForm.imageIds9"  @uploadImage="imgUploadSuccess9" @delImage="delImage9" :fileType="['png','jpg','jpeg']" :limit="4"></ImageUpload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 20px 0;" v-if="(showImageIntensity10==true || showImageIntensityAll==true) && imageForm.minIntensity<=10 && imageForm.maxIntensity>=10">
              <el-col>
                <el-form-item label="Ⅹ度区图片" prop="imageIds10" required :rules="imageRules.imageIds10">
                  <ImageUpload ref="imageUpload10" :modelValue="imageForm.imageIds10"  @uploadImage="imgUploadSuccess10" @delImage="delImage10" :fileType="['png','jpg','jpeg']" :limit="4"></ImageUpload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin: 20px 0;">
              <el-col>
                <p style="text-align:center;color:orange;">
                  <span>提示：每个烈度区最多上传四张图片</span>
                </p>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="saveImageForm">保 存</el-button>
              <el-button @click="uploadImageBool = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>

        <!--版本选择面板-->
        <VersionDialog v-if="openVersionDialog"
                       :open="openVersionDialog" :type="versionDialogType"
                       @closeDialog="closeVersionDialog" @selectVersionData="selectVersionData"
        ></VersionDialog>
      </div>
    </div>
</template>
  
<script setup name="delimitEvaluationsubarea">
//地图
import FsiIndexMap from '@/map/fastDisasterAnalysis/fastSeismicInfluence/indexMap.vue';
import ControlToolBar from '@/map/fastDisasterAnalysis/fastSeismicInfluence/controlToolBar/map.vue';
import IntensityModel from '@/views/fastDisasterAnalysis/fastSeismicInfluence/intensity/index.vue';
import ImageUpload from '@/views/fastDisasterAnalysis/fastSeismicInfluence/ImageUpload/index.vue';
import VersionDialog from '@/views/fastDisasterAnalysis/fastSeismicInfluence/versionDialog.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import { countEqIntensity, getFastSeismicInfluenceListByFvId, getFastSiVersionByFvId,
  getFastSiVersionListByXsemId,updateFastSiVersion,delFastSiVersion } from "@/api/fastDisasterAnalysis/fastSeismicInfluence/intensity";
import { getDetail } from "@/api/comprehensiveInformation/seismicEvents.js"
import useEventStore from "@/store/modules/event";
import * as turf from "@turf/turf";
import { iServerHttp } from "@/map/projMap.js"

const { proxy } = getCurrentInstance();
const currentEvent = computed(() => useEventStore().currentEvent);
const router = useRouter();
const dialogTitle = ref("选择衰减关系模型");
const dialogOpen = ref(false);
const tableLoading = ref(false);
const title = ref("上传图片");
const uploadImageBool = ref(false);//是否显示上传图片dialog
const showImageIntensityAll = ref(false);//显示全部烈度值的图片
const showImageIntensity6 = ref(false);//显示6烈度值的图片
const showImageIntensity7 = ref(false);//显示7烈度值的图片
const showImageIntensity8 = ref(false);//显示8烈度值的图片
const showImageIntensity9 = ref(false);//显示9烈度值的图片
const showImageIntensity10 = ref(false);//显示10烈度值的图片


const data = reactive({
  addForm: {
    xsemId:null,//事件ID
    modelId: null,//模型ID
    angle: 0,//长轴方向角度
    longitude:null,//中心点经度
    latitude:null,//中心点纬度
    earthquakeLevel:null,//震级
    modelName: null,//模型名称
    centerLonLat:null,//中心点
    dzLonLat:null,//地震经纬度
  },
  rules: {
    xsemId: [{ required: true, message: "请选择事件", trigger: "blur" }],
    modelId: [{ required: true, message: "请选择模型", trigger: "blur" }],
    angle: [{ required: true, message: "长轴方向角度不能为空，取值区间为[0-180]", trigger: "change" }],
    longitude: [{ required: true, message: "中心点经度不能为空", trigger: "change" }],
    latitude: [{ required: true, message: "中心点纬度不能为空", trigger: "change" }],
    earthquakeLevel: [{ required: true, message: "震级不能为空", trigger: "change" }],
  },
  queryParams: {
    page: 1,
    rows: 10,
  },
  imageForm:{
    fvId:null,//ID
    minIntensity:6,//最小地震烈度
    maxIntensity:10,//最大地震烈度
    imageIds6:null,
    imageIds7:null,
    imageIds8:null,
    imageIds9:null,
    imageIds10:null,
  },
  imageRules: {
    imageIds6: [{ required: true, message: "请上传图片", trigger: "change" }],
    imageIds7: [{ required: true, message: "请上传图片", trigger: "change" }],
    imageIds8: [{ required: true, message: "请上传图片", trigger: "change" }],
    imageIds9: [{ required: true, message: "请上传图片", trigger: "change" }],
    imageIds10: [{ required: true, message: "请上传图片", trigger: "change" }],
  },
  clickParams:{//地图点击选择的地震影响场烈度
    lonlat:null,//地图点击经纬度
    intensity:null,//烈度
  },
  //图层数据类别code和url列表
  layerDataTypeList:[
    {
      //断层数据
      level2DataType:"hdc",//数据类别二级code
      level3DataType:"dc",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
  ],
})
const { addForm,rules,queryParams,imageForm,imageRules,clickParams,layerDataTypeList } = toRefs(data)


/*地图传参start*/
const pageType = ref("地震影响场快速生成页面");
const mapLoading = ref(false);
const completeRefreshData = ref(false);//防止刷新后地图不显示
const epicenterLayerBool = ref(true)
const epicenterLayerBool2 = ref(false)
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
}
function setEpicenterLayerBool() {
  epicenterLayerBool2.value = true
}
const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Circle圆形绘制 Clear清空）
//是否显示快速生成地震影响场面板
const showFastSeismicInfluenceDivBool = ref(true);
const showFastSeismicInfluenceDiv = (bool)=>{
  showFastSeismicInfluenceDivBool.value= bool;
}
//长轴方向地图指定
const mapDrawLine = ()=>{
  mapDrawType.value = "DirectionLine";
}
//获取长轴方向和中心点
const getDirectionLine = (obj)=>{
  if(obj){
    let centerLonLat = obj.centerLonLat;//中心点
    addForm.value.longitude = centerLonLat[0];//中心点经度
    addForm.value.latitude = centerLonLat[1];//中心点纬度
    longitude.value = centerLonLat[0].toFixed(2);
    latitude.value = centerLonLat[1].toFixed(2);
    addForm.value.centerLonLat = centerLonLat;
    let lineCoords = obj.lineCoords;//方向线
    //计算经度
    let point1 = turf.point(lineCoords[0]);
    let point2 = turf.point(lineCoords[1]);
    //计算方向(从北线（0度）开始测量的角度，即北为0，东为90，东南为135，西为-90，西南为-135)
    let bearing = turf.bearing(point1, point2);
    console.log(bearing);
    //计算角度，与X轴方向的夹角
    let angle = 0;
    if(bearing<0){
      bearing = 180 + bearing;
    }
    if(bearing>=0 && bearing<=90){
      angle = 90 - bearing;
    }else if(bearing>90 && bearing<=180){
      angle = 270 - bearing;
    }
    addForm.value.angle = angle;
  }
  mapDrawType.value = "Clear";
  proxy.$refs["addRef"].validate(valid => {
    if (valid) {
      //
    }
  });
}
//快速生成
const createFastSeismicInfluence = ()=>{
  proxy.$refs["addRef"].validate(valid => {
    if (valid) {
      console.log("快速生成");
      mapLoading.value = true;
      countEqIntensity({...addForm.value}).then(res=>{
        let data = res.data;
        console.log(data);
        mapLoading.value = false;
        if(data){
          let fvId = data.fvId;
          //地图查看
          queryFastSeismicInfluence(fvId);
          //根据事件ID查询地震影响场版本信息列表
          getFastSiVersionList();
        }
      })
    }
  });
}

//地震影响场版本信息
const fastSiVersion = ref(null);
// 根据版本ID查询地震影响场版本信息
function getFastSiVersion(fvId){
  getFastSiVersionByFvId(fvId).then(res=>{
    let data = res.data;
    if(data){
      //地震影响场版本信息
      fastSiVersion.value = data;
    }
  });
}

//地震影响场空间数据列表
const fastSeismicInfluenceList = ref([]);
// 根据版本ID查询地震影响场空间数据列表
function getFastSeismicInfluenceList(fvId){
  getFastSeismicInfluenceListByFvId(fvId,"").then(res=>{
    let data = res.data;
    console.log(data);
    fastSeismicInfluenceList.value = data;
  })
}
//地震影响场图例列表
const fsiLegendList = ref([
  {fullName:"Ⅴ（5度）",name:"Ⅴ",value:"5",color:"rgba(255,220,220,0.7)",show:false},
  {fullName:"Ⅵ（6度）",name:"Ⅵ",value:"6",color:"rgba(255,190,190,0.7)",show:false},
  {fullName:"Ⅶ（7度）",name:"Ⅶ",value:"7",color:"rgba(255,127,127,0.7)",show:false},
  {fullName:"Ⅷ（8度）",name:"Ⅷ",value:"8",color:"rgba(200,40,40,0.7)",show:false},
  {fullName:"Ⅸ（9度）",name:"Ⅸ",value:"9",color:"rgba(168,0,0,0.7)",show:false},
  {fullName:"Ⅹ（10度）",name:"Ⅹ",value:"10",color:"rgba(140,0,0,0.7)",show:false},
  {fullName:"Ⅺ（11度）",name:"Ⅺ",value:"11",color:"rgba(105,0,0,0.7)",show:false},
  {fullName:"Ⅻ（12度）",name:"Ⅻ",value:"12",color:"rgba(80,0,0,0.7)",show:false},
]);

//是否显示断层版本选择
const openVersionDialog = ref(false);//版本选择面板
const showFaultVersion = (bool)=>{
  openVersionDialog.value = bool;
  if(bool==false){
    //设置数据版本
    removeLayerVersion("dc");//断层
  }
}
const versionDialogType = ref("断层");
const closeVersionDialog = ()=>{
  openVersionDialog.value = false;
}
//版本选择结果
const selectVersionData = (obj)=>{
  if(obj){
    let faultVersion = obj.versionCode;
    //设置数据版本
    setLayerVersion("dc",faultVersion);//断层
  }
}

//设置图层数据版本
function setLayerVersion(type,version){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].versionCode = version;
      list[i].show = true;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//移除图层数据版本
function removeLayerVersion(type,version){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].show = false;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//是否显示地震影响场版本信息列表表格
const showFastSiVersionTableBool = ref(false);
const showFastSiVersionTable = (bool)=>{
  showFastSiVersionTableBool.value = bool;
  if(bool){
    //根据事件ID查询地震影响场版本信息列表
    getFastSiVersionList();
  }
}
/*地图传参end*/

//显示选择衰减关系模型
const selectModel = ()=>{
  dialogOpen.value = true;
}
const closeDialog = ()=>{
  dialogOpen.value = false;
}
//选择模型
const sureSelectModel = (obj)=>{
  if(obj){
    addForm.value.modelId = obj.id;//模型数据
    addForm.value.modelName = obj.modelName;//模型名称
    proxy.$refs["addRef"].validate(valid => {
      if (valid) {
        //
      }
    });
  }
  closeDialog();
}

//地震影响场版本信息列表
const fastSiVersionList = ref([]);
const total = ref(0);//总数
// 根据事件ID查询地震影响场版本信息列表
function getFastSiVersionList(){
  let xsemId = addForm.value.xsemId;
  if(xsemId){
    tableLoading.value = true;
    getFastSiVersionListByXsemId({xsemId,...queryParams.value}).then(res=>{
      fastSiVersionList.value = res.data.rows ? res.data.rows : [];
      total.value = res.data.total;
      tableLoading.value = false;
    })
  }
}

//上传图片
const uploadImageDiv = (fvId,intensity)=>{
  imageForm.value.fvId = fvId;
  imageForm.value.imageIds6 = null;
  imageForm.value.imageIds7 = null;
  imageForm.value.imageIds8 = null;
  imageForm.value.imageIds9 = null;
  imageForm.value.imageIds10 = null;
  showImageIntensityAll.value = false;//是否显示全部烈度值的图片
  showImageIntensity6.value = false;//是否显示6烈度值的图片
  showImageIntensity7.value = false;//是否显示7烈度值的图片
  showImageIntensity8.value = false;//是否显示8烈度值的图片
  showImageIntensity9.value = false;//是否显示9烈度值的图片
  showImageIntensity10.value = false;//是否显示10烈度值的图片
  if(intensity!=null){
    if(intensity==6){
      title.value = "Ⅵ度区图片查看";
      showImageIntensity6.value = true;//是否显示6烈度值的图片
    }else if(intensity==7){
      title.value = "Ⅶ度区图片查看";
      showImageIntensity7.value = true;//是否显示7烈度值的图片
    }else if(intensity==8){
      title.value = "Ⅷ度区图片查看";
      showImageIntensity8.value = true;//是否显示8烈度值的图片
    }else if(intensity==9){
      title.value = "Ⅸ度区图片查看";
      showImageIntensity9.value = true;//是否显示9烈度值的图片
    }else if(intensity==10){
      title.value = "Ⅹ度区图片查看";
      showImageIntensity10.value = true;//是否显示10烈度值的图片
    }
  }else{
    title.value = "上传图片";
    showImageIntensityAll.value = true;//是否显示全部烈度值的图片
  }
  //查询版本信息
  getFastSiVersionByFvId(fvId).then(res=>{
    let data = res.data;
    console.log(data);
    if(data){
      imageForm.value.minIntensity = data.minIntensity;//最小地震烈度
      imageForm.value.maxIntensity = data.maxIntensity;//最大地震烈度
      imageForm.value.imageIds6 = data.imageIds6;
      imageForm.value.imageIds7 = data.imageIds7;
      imageForm.value.imageIds8 = data.imageIds8;
      imageForm.value.imageIds9 = data.imageIds9;
      imageForm.value.imageIds10 = data.imageIds10;
      uploadImageBool.value = true;
    }
  })
}

//保存图片上传表单
const saveImageForm = ()=>{
  proxy.$refs["imageAddRef"].validate(valid => {
    if (valid) {
      updateFastSiVersion(imageForm.value).then(res=>{
        uploadImageBool.value = false;
        proxy.$modal.msgSuccess("保存成功");
        //根据事件ID查询地震影响场版本信息列表
        getFastSiVersionList();
      });
    }
  });
}

//获取图片文件ids
function getFileListAttachIds(fileList){
  let ids = "";
  if(fileList!=null && fileList.length>0){
    for(let i=0;i<fileList.length;i++){
      let attachId = fileList[i].attachId;
      if(i>0){
        ids += ",";
      }
      ids += attachId;
    }
  }

  return ids;
}

//获取上传图片的ID
const imgUploadSuccess6 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds6 = ids;
}

//获取上传图片的ID
const imgUploadSuccess7 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds7 = ids;
}

//获取上传图片的ID
const imgUploadSuccess8 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds8 = ids;
}

//获取上传图片的ID
const imgUploadSuccess9 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds9 = ids;
}

//获取上传图片的ID
const imgUploadSuccess10 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds10 = ids;
}

const delImage6 = (fileList)=>{
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds6 = ids;
}

const delImage7 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds7 = ids;
}

const delImage8 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds8 = ids;
}

const delImage9 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds9 = ids;
}

const delImage10 = (fileList) => {
  let ids = getFileListAttachIds(fileList);//获取图片文件ids
  imageForm.value.imageIds10 = ids;
}

//删除
const handleDelete = (fvId)=>{
  proxy.$modal
      .confirm("请确认是否要删除地震影响场？", )
      .then(function() {
        return delFastSiVersion(fvId);
      })
      .then(() => {
        //根据事件ID查询地震影响场版本信息列表
        getFastSiVersionList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
}

//查询地震影响场
const queryFastSeismicInfluence = (fvId)=>{
  //地图弹窗内容
  popupContent.value = [null,null];
  // 根据版本ID查询地震影响场版本信息
  getFastSiVersion(fvId);
  // 根据版本ID查询地震影响场空间数据列表
  getFastSeismicInfluenceList(fvId);
}

//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}

//地图弹窗内容
const popupContent = ref([null,null]);//弹窗内容,经纬度
//获取点击的要素
const getClickFeature = (obj)=>{
  if(obj) {
    let lonlat = obj.lonlat;
    let feature = obj.feature;
    if(feature){
      let temp = feature.getProperties();
      if(temp){
        // let fvId = temp.fvId;
        let intensity = temp.intensity;
        if(intensity!=undefined && intensity!=null){
          let params = {
            lonlat:lonlat,//地图点击经纬度
            intensity:intensity,//烈度
          }
          //地图点击选择的地震影响场烈度
          clickParams.value = params;
          //地震影响场版本信息
          let data = fastSiVersion.value;
          if(data){
            let html = "<div style='width: 320px;'>";
            html += "<p>预估烈度：<span style='color:red;'>";
            let ids = "";
            if(intensity==6){
              ids = data.imageIds6;
              html += "Ⅵ（6）度";
            }else if(intensity==7){
              ids = data.imageIds7;
              html += "Ⅶ（7）度";
            }else if(intensity==8){
              ids = data.imageIds8;
              html += "Ⅷ（8）度";
            }else if(intensity==9){
              ids = data.imageIds9;
              html += "Ⅸ（9）度";
            }else if(intensity==10){
              ids = data.imageIds10;
              html += "Ⅹ（10）度";
            }
            html += "</span></p>";
            if(ids){
              let array = ids.split(",");
              for(let i=0;i<array.length;i++){
                let attachId = array[i];
                let url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId="+ encodeURIComponent(attachId);
                html += "<img src='"+url+"' style='width: 150px;margin-right: 10px;margin-bottom: 10px;'>"
              }
            }
            html += "</div>";
            //地图弹窗内容
            popupContent.value = [html,lonlat];
          }
          return;
        }
      }
    }
  }

  //清空
  let params = {
    lonlat:null,//地图点击经纬度
    intensity:null,//烈度
  }
  //地图点击选择的地震影响场烈度
  clickParams.value = params;
  //地图弹窗内容
  popupContent.value = [null,null];
}

const resetClearAllBool = ref(false);//是否清空全部超图图层

//导出shp文件并下载zip
function downloadShpFile(fvId){
  let sqlFilter = "fv_id='"+fvId+"' and del_flag='0'";//版本号
  //根据sql导出shp文件并下载zip
  downloadShpFileBySql("地震影响场","xzch_fast_seismic_influence",sqlFilter);
}

//根据sql导出shp文件并下载zip
function downloadShpFileBySql(name,dataset,sqlFilter){
  //下载文件
  let fileName = name + ".zip";
  proxy.download("/intensity/downloadShpFileBySql", {
    dataset:dataset,sqlFilter:sqlFilter
  }, fileName);
}

//获取当前事件
let longitude = ref()
let latitude = ref()
watch(() => currentEvent.value, val => {
  if(val && val.id){
    console.log("获取当前事件");
    getDetail({ id: val.id }).then(res => {
      let data = res.data;
      console.log(data);
      if(data){
        addForm.value.xsemId = data.xsemId;//事件ID
        addForm.value.earthquakeLevel = Number(data.magnitude);//震级
        addForm.value.longitude = data.longitude;//经度
        addForm.value.latitude = data.latitude;//纬度
        longitude.value = data.longitude.toFixed(2);
        latitude.value = data.latitude.toFixed(2);
        addForm.value.centerLonLat = [data.longitude,data.latitude];//中心点
        addForm.value.dzLonLat = [data.longitude,data.latitude];//地震经纬度
      }
    })
  }
},{ deep: true, immediate: true });

onMounted(() => {
  completeRefreshData.value = true;
})
</script>
  
<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.currentEventDiv {
  position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.8);border:1px solid gray;padding:20px;
}

/*灾区范围图层图例*/
.new-legendDiv {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}
.new-legendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-legendDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-legendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}
.new-legendDiv-polygon {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border:1px solid black;
  background:#fff;
}

.new-tableDiv {
  padding:20px;
}
</style>
  
  